import 'package:flutter/material.dart';

class SearchAppBar extends StatefulWidget implements PreferredSizeWidget {
  @override
  final Size preferredSize;

  SearchAppBar({Key key})
      : this.preferredSize = Size.fromHeight(56.0),
        super(key: key);

  @override
  _SearchAppBarState createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final top = MediaQuery.of(context).padding.top;
    final textColor = Colors.white;
    return Container(
      padding: EdgeInsets.only(top: top),
      decoration: BoxDecoration(color: theme.primaryColor),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: EdgeInsets.only(left: 15),
            child: Icon(
              Icons.pin_drop_outlined,
              size: 16,
              color: textColor,
            ),
          ),
          Container(
            child: Text(
              "北京",
              style: TextStyle(color: textColor),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 5, right: 5),
            padding: EdgeInsets.all(5),
            child: GestureDetector(
              child: Icon(
                Icons.arrow_back,
                color: textColor,
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(top: 10, bottom: 10, right: 10),
              decoration: BoxDecoration(
                color: Colors.white54,
                borderRadius: BorderRadius.all(
                  Radius.circular(15),
                ),
              ),
              child: TextField(
                style: TextStyle(color: textColor),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(0),
                  prefixIcon: Icon(
                    Icons.search,
                    color: textColor,
                  ),
                  suffixIcon: Icon(
                    Icons.clear,
                    color: textColor,
                  ),
                  border: InputBorder.none,
                  hintText: "请输入搜索词",
                  hintStyle: TextStyle(color: Colors.white54),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(5),
            child: Text(
              "取消",
              style: TextStyle(color: textColor),
            ),
          ),
          Container(
            padding: EdgeInsets.all(5),
            margin: EdgeInsets.only(right: 10),
            child: Icon(
              Icons.public,
              color: textColor,
            ),
          ),
        ],
      ),
    );
  }
}
